<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <!-- 确保引入Vue.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <!-- 或使用本地路径引入vue.js -->
    <style>
        .container {
            max-width: 400px;
            background: #F8F9FD;
            background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(244, 247, 251) 100%);
            border-radius: 40px;
            padding: 25px 35px;
            border: 5px solid rgb(255, 255, 255);
            box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;
            margin: 100px;
        }

        .heading {
            text-align: center;
            font-weight: 900;
            font-size: 30px;
            color: rgb(16, 137, 211);
        }

        .form {
            margin-top: 50px;
        }

        .input {
            width: 90%;
            background: white;
            border: none;
            padding: 20px 20px;
            border-radius: 20px;
            margin-top: 15px;
            box-shadow: #cff0ff 0px 10px 10px -5px;
            border-inline: 2px solid transparent;
        }

        .input::-moz-placeholder {
            color: rgb(170, 170, 170);
        }

        .input::placeholder {
            color: rgb(170, 170, 170);
        }

        .input:focus {
            outline: none;
            border-inline: 2px solid #12B1D1;
        }

        .forgot-password {
            display: block;
            margin-top: 10px;
            margin-left: 10px;
        }

        .forgot-password a {
            font-size: 11px;
            color: #0099ff;
            text-decoration: none;
        }

        .login-button {
            display: block;
            width: 100%;
            font-weight: bold;
            background: linear-gradient(45deg, rgb(16, 137, 211) 0%, rgb(18, 177, 209) 100%);
            color: white;
            padding-block: 20px;
            margin: 20px auto;
            border-radius: 20px;
            box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
            border: none;
            transition: all 0.2s ease-in-out;
        }

        .login-button:hover {
            transform: scale(1.03);
            box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;
        }

        .login-button:active {
            transform: scale(0.95);
            box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;
        }
        .agreement {
            display: block;
            text-align: center;
            margin-top: 15px;
        }

        .agreement a {
            text-decoration: none;
            color: #0099ff;
            font-size: 9px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="app" style="display: flex; justify-content: center; align-items: center; min-height: 100vh;">
    <div class="container">
        <h2 class="heading">欢迎登录</h2>
        <form @submit.prevent="onSubmit">
            <input required v-model="username" type="text" placeholder="用户名" class="input" />
            <input required v-model="password" type="password" placeholder="密码" class="input" />
            <input type="submit" value="登录" class="login-button" />
            <input type="button" value="注册" class="login-button" @click="register" />
        </form>
        <span class="agreement"><a href="https://web.sanguosha.com/login/index.html">查看用户许可协议</a></span>
        <span class="agreement"><a href="http://localhost:63342/Face/templates/password_reset.html?_ijt=r9nn43dq30oi4ou7b57o841kmu&_ij_reload=RELOAD_ON_SAVE">忘记密码</a></span>
    </div>
</div>
<script>
    new Vue({
    el: '#app',
    data: {
        username: '',
        password: '',
    },
    methods: {
        onSubmit() {
            const data = {
                user: this.username,
                password: this.password
            };
            $.ajax({
                type: "POST",
                url: "http://127.0.0.1:8888/login", // 替换成实际的接口URL
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function(response) {

                    if (response.status === 1) { // 假设返回的JSON包含status字段
                        // alert("登录成功：" + response.msg);
                        sessionStorage.setItem('username', response.user);
                        sessionStorage.setItem('password', response.password);
                        window.location.href = "personal_msg.html"; // 跳转到密码重置页面
                        // 或其他成功地处理逻辑
                    } else {
                        alert("登录失败：" + response.msg);
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error occurred while fetching data:", xhr.status, error);
                    alert("服务器响应错误，请稍后再试。"); // 显示给用户一个友好的错误提示
                }
            });
        },
        register() {
            // 跳转或调用注册逻辑
            window.location.href = "Registration.html";
        },
    },
});
</script>
</body>
</html>